<template>
	<view class="container mySetupclass">
		<!-- <view class="setupTips">
			<view class="">
				请补全以下带 <text style="color: #E04B28;">*</text>号的信息
			</view>
		</view> -->
		<view class="paddingClass">
			<view class="setupInfo">
				<view class="setupTitle">
					头像
				</view>
				<view class="setupCon">
					<image class="img" :src="headimgurl||'../../../static/img/mine_def_touxiang_3x.png'" mode=""></image>
				</view>
			</view>
			<view class="setupInfo" @tap="goUpdata('1',userName)">
				<view class="setupTitle">
					姓名
					<!-- <view class="stars">
						*
					</view> -->
				</view>
				<view class="setupCon">
					<text class="" v-if="userName">{{userName}}</text>
					<text class="" v-else>未设置</text>
					<text class="iconfont iconxiangyou"></text>
				</view>
			</view>
			<view class="setupInfo" @tap="goUpdata('0',userMobile)">
				<view class="setupTitle">
					手机
					<!-- <view class="stars">
						*
					</view> -->
				</view>
				<view class="setupCon">
					<text class="" v-if="userMobile">{{userMobile}}</text>
					<text class="" v-else>未设置</text>
					<text class="iconfont iconxiangyou"></text>
				</view>
			</view>
			<view class="">
				<picker @change="genderChange" :value="genderIndex" :range="genderArray">
					<view class="setupInfo">
						<view class="setupTitle">
							性别
							<!-- <view class="stars">
								*
							</view> -->
						</view>
						<view class="setupCon">
							<text class="" v-if="userGender">{{userGender}}</text>
							<text class="" v-else>未设置</text>
							<text class="iconfont iconxiangyou"></text>
						</view>
					</view>
				</picker>

			</view>
			<view class="">
				<picker mode="date" :value="userBirth" @change="bindDateChange">
					<view class="setupInfo">
						<view class="setupTitle">
							生日
							<!-- <view class="stars">
								*
							</view> -->
						</view>
						<view class="setupCon">
							<text class="" v-if="userBirth">{{userBirth}}</text>
							<text class="" v-else>未设置</text>
							<text class="iconfont iconxiangyou"></text>
						</view>
					</view>
				</picker>
			</view>
			<!-- <view class="setupInfo" @tap="jumpTo">
				<view class="setupTitle">
					收货地址
				</view>
				<view class="setupCon">
					<text class="iconfont iconxiangyou"></text>
				</view>
			</view> -->
			<view class="">
				<picker @change="bindPickerChange" :value="ageIndex" :range="ageArray">
					<view class="setupInfo">
						<view class="setupTitle">
							年龄区间
						</view>
						<view class="setupCon">
							<text class="" v-if="ageRange">{{ageRange}}</text>
							<text class="" v-else>未设置</text>
							<text class="iconfont iconxiangyou"></text>
						</view>
					</view>
				</picker>
			</view>
			<view class="">
				<picker @change="skinChange" :value="skinIndex" :range="skinArray">
					<view class="setupInfo">
						<view class="setupTitle">
							我的肤质
						</view>
						<view class="setupCon">
							<text class="" v-if="skinType">{{skinType}}</text>
							<text class="" v-else>请选择</text>
							<text class="iconfont iconxiangyou"></text>
						</view>
					</view>
				</picker>
			</view>
			<view class="">
				<picker @change="beautifulChange" :value="beautifulIndex" :range="beautifulArray">
					<view class="setupInfo">
						<view class="setupTitle">
							美丽困扰
						</view>
						<view class="setupCon">
							<text class="" v-if="beautifulPlagued">{{beautifulPlagued}}</text>
							<text class="" v-else>请选择</text>
							<text class="iconfont iconxiangyou"></text>
						</view>
					</view>
				</picker>
			</view>
			
		</view>
		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponShow: false,
				type: 'center',
				setupType: 0,
				popupTitle: '',
				headimgurl:'',
				userName: '', //姓名
				userName1: '', //姓名
				userMobile: '', //电话
				userMobile1: '', //电话
				userGender: '', //性别
				userGender1: '', //性别
				genderArray: ['女', '男'], //性别数组
				genderIndex: 0, //性别
				date: '',
				userBirth: '', //生日
				userBirth1: '', //生日
				ageArray: ['10-20', '20-30', '30-40', '40+'],
				ageRange: '', //年龄区间
				ageRange1: '', //年龄区间
				ageIndex: 0, //年龄区间index
				beautifulPlagued: '',
				beautifulPlagued1: '',
				// beautifulArray:["面部色斑","毛孔粗大","松弛下垂","黑眼圈","黄黑皮","干纹皱纹","粗糙暗沉"],
				beautifulArray: ['请选择'],
				// beautifulArrayAll:[],
				beautifulIndex: 0,
				skinType: "",
				skinType1: "",
				// skinArray:["敏感肌","干皮","混干皮","中性皮肤","痘痘肌","油皮","混油皮"],
				skinArray: ['请选择'],
				skinArrayAll: this.$store.state.dictDataAll,
				skinIndex: 0,
				height: 0,
				// customersAddressData:[]
			}
		},
		onLoad() {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			// this.getDictDataAll()
			this.userBirth = this.getDate({
				format: true
			})
			this.skinArrayAll=this.$store.state.dictDataAll
			// this.getInfo()
			// console.log(this.skinArrayAll)
			// this.skinArrayAll.skin_Type.forEach((item)=>{
			// 	this.skinArray.push(item.dictLabel)
			// })
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			// getDictDataAll(){
			// 	this.$http.dictDataAll().then((res) => {
			// 		if(res.status === 0) {
			// 			this.$store.commit("changeDictDataAll",res.data);
			// 	// 		res.data.skin_Type.forEach((item)=>{
			// 	// 	this.skinArray.push(item.dictLabel)
			// 	// })
			// 			this.getInfo()
			// 		}
			// 	})
			// },
			// jumpTo() {
			// 		let addressData = JSON.stringify(this.customersAddressData);
			// 		uni.navigateTo({
			// 			url: "../myAddress/myAddress?addressData=" + addressData
			// 		})
			// },
			
			
			init() {
				if(this.skinArrayAll.beautiful_plagued){
					this.skinArrayAll.beautiful_plagued.forEach((item) => {
						this.beautifulArray.push(item.dictLabel)
					})
				}
				if(this.skinArrayAll.skin_Type){
					this.skinArrayAll.skin_Type.forEach((item) => {
						this.skinArray.push(item.dictLabel)
					})
				}
				
			},
			// 初期化
			getInfo() {
				this.init()
				let params={
					type:1,
				}
				this.$http.customersIncipient(params).then((res) => {
					if (res.status === 0) {
						console.log(res.data)
						this.userName = res.data.customer.userName
						this.headimgurl = res.data.customer.headimgurl
						this.userMobile = res.data.customer.userMobile
						this.userGender = this.genderArray[res.data.customer.userGender]
						this.genderIndex = Number(res.data.customer.userGender)
						this.userBirth = res.data.customer.userBirth
						this.ageRange = this.ageArray[res.data.customer.ageRange]
						this.ageIndex = Number(res.data.customer.ageRange)
						if(res.data.customer.beautifulPlagued||res.data.customer.beautifulPlagued=='0'){
							this.beautifulPlagued = this.beautifulArray[(Number(res.data.customer.beautifulPlagued) + 1)]
						this.beautifulIndex = (Number(res.data.customer.beautifulPlagued) + 1)
						}
						
						if(res.data.customer.skinType||res.data.customer.skinType=='0'){
							console.log(Number(res.data.customer.skinType))
							this.skinIndex = (Number(res.data.customer.skinType) + 1)
							this.skinType = this.skinArray[(Number(res.data.customer.skinType) + 1)]
						}
						
						
						// this.customersAddressData=res.data.customersAddressData
						// this.ageRange=this.ageArray[res.data.ageRange]
					}
				})
			},
			togglePopup() {
				this.couponShow = true

			},
			// 修改姓名和手机号
			goUpdata(type, data) {
				uni.navigateTo({
					url: `../mySetup/updata?type=${type}&data=${data}`
					// url: "../myUpdata/myUpdata"
				})
			},
			// 选择生日
			bindDateChange(e) {
				this.userBirth = e.target.value
				let params = {}
				params.userBirth = this.userBirth
				params.type = 5
				this.$http.customersUpdate(params).then((res) => {
					if (res.status === 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
						})
					}
				})
			},
			// 选择性别
			genderChange(e) {
				this.genderIndex = e.target.value
				this.userGender = this.genderArray[this.genderIndex]
				let params = {}
				params.userGender = this.genderIndex
				params.type = 4
				this.$http.customersUpdate(params).then((res) => {
					if (res.status === 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
						})
					}
				})
			},
			// 选择年龄区间
			bindPickerChange(e) {
				this.ageIndex = e.target.value
				this.ageRange = this.ageArray[this.ageIndex]
				let params = {}
				params.ageRange = this.ageIndex
				params.type = 7
				this.$http.customersUpdate(params).then((res) => {
					if (res.status === 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
						})
					}
				})
			},
			// 选择美丽困扰
			beautifulChange(e) {
				this.beautifulIndex = e.target.value
				this.beautifulPlagued = this.beautifulArray[this.beautifulIndex]
				let params = {}
				params.beautifulPlagued = String(this.beautifulIndex - 1)
				params.type = 8
				console.log(params)
				this.$http.customersUpdate(params).then((res) => {
					if (res.status === 0) {
						// this.skinType=this.skinType1
						// this.couponShow = false
						uni.showToast({
							title: '保存成功',
							icon: 'none',
						})
					}
				})
			},
			// 选择我的肤质
			skinChange(e) {
				this.skinIndex = e.target.value
				this.skinType = this.skinArray[this.skinIndex]
				let params = {}
				params.skinType = String(this.skinIndex - 1)
				params.type = 9
				console.log(params)
				this.$http.customersUpdate(params).then((res) => {
					if (res.status === 0) {
						// this.skinType=this.skinType1
						// this.couponShow = false
						uni.showToast({
							title: '保存成功',
							icon: 'none',
						})
					}
				})
			},
			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			},
			cancel() {
				this.couponShow = false
			},

			preserve() {}
		}
	}
</script>

<style lang="scss">
	.container {
		color: #111111;
		background-color: #fff;
		height: 100vh;
		font-size: 30rpx;
	}

	.setupTips {
		padding: 40rpx 20rpx;
		border-top: 5rpx solid #f7f7f7;
		border-bottom: 20rpx solid #f7f7f7;
	}
	.paddingClass{
		padding: 0 20rpx;
	}
	.setupInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-top: 20rpx;
		padding: 25rpx 20rpx;
		border-bottom: 1px solid #eee;
		// background-color: #fff;

		.img {
			width: 80rpx;
			height: 80rpx;
		}
		.setupTitle{
			position: relative;
			color: #111;
		}
		.setupCon{
			color: #999;
		}
		.stars{
			color: #F54F46;
			position: absolute;
			top: -10rpx;
			left: 64rpx;
		}
	}

	.mySetupclass .uni-popup {
		z-index: 99995 !important;
	}

	.uni-tip-box {
		padding: 15rpx;
		width: 500rpx;
		// height: 400rpx;
		text-align: center;
		background: #fff;
		box-sizing: border-box;
		border-radius: 20rpx;
		position: relative;
	}

	.setupInput {
		border: 1px solid #ccc;
		border-radius: 20rpx;
		height: 60rpx;
	}

	.setupTypeShow {
		padding: 20rpx;
	}

	.couponButton {
		padding: 0 140rpx;

	}

	.couponButton .uni-button {
		width: 80rpx !important;
		background-color: #E94732;
		color: #fff !important;
	}

	.uni-tip-group-button {
		margin-top: 40rpx;
		display: flex;
		// position: absolute;
		// bottom: 40rpx;
		// width: 100%;
	}

	.uni-tip-button {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		border: 2rpx solid #E94732;
		margin: 0 20rpx;
		border-radius: 40rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #E94732;
	}
</style>
